<template>
  <div>counter:{{ counter }}</div>
  <div>计算属性: doubleCounter {{ doubleCounter }}</div>
  <div>
    <button @click="$store.commit('addCounter')">
      使用vuex增加 counter +1
    </button>
  </div>
  <div>
    <!-- <input
      type="text"
      v-model="todoName"
      @keyup.enter="addTodo(newTodo(todoName))"
      :style="{
        width: styleInput.wt,
        height: styleInput.ht,
        borderRadius: styleInput.br,
        paddingLeft: styleInput.pd,
      }"
    /> -->

    <div>
      {{ items }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, defineProps, PropType } from 'vue'
import { useStore } from 'vuex'
import { key } from '../store'
// import { Todo, StyleInput } from '../types'
const store = useStore(key)
// /** prop */
// defineProps({
//   styleInput: {
//     type: Object as PropType<StyleInput>,
//     required: true,
//   },
// })
/** vuex 的值都将用computed */
// const counter = ref(1)
// const doubleCounter = computed(() => counter.value * 2)
const counter = computed(() => store.state.counter)
const doubleCounter = computed(() => counter.value * 2)
const items = computed(() => store.state.todos?.items)
/** created 方法直接写 */
// items.value.push({
//   id: 1,
//   name: 'vue3',
// })

// const todoName = ref('')
// // todos 初始化
// store.dispatch('todos/initTodo')
// const newTodo = (todoName: string): Todo => {
//   return {
//     id: items.value!.length + 1,
//     name: todoName,
//   }
// }
// const addTodo = (todo: Todo): void => {
//   items.value!.push(todo)
//   todoName.value = ''
// }
</script>

<style lang="sass" scoped></style>
